<template>
  <div class="header_back fixed">
    <div class="backDiv" @click="goBack" v-click-move>
      <NuxtImg src="/images/layout/back.png" class="backBtn heat_btn2" />
    </div>
    <p>{{ title }}</p>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  callBack: {
    type: Function,
    default: undefined,
  },
});

const router = useRouter();
function goBack() {
  if (props.callBack) {
    props.callBack();
  } else {
    router.back();
  }
}
</script>

<style scoped lang="scss">
.fixed {
  position: fixed;
  z-index: 99;
  top: 0;
}
.header_back {
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 0.34rem;
  box-sizing: border-box;
  background: var(--box-bg-color);
  height: 1.2rem;
  gap: 3.57rem;
  overflow: hidden;
  transition: background-color 0.3s ease;
  max-width: var(--max-client-width);
  left: 50%;
  transform: translateX(-50%);
}
.header_back .backDiv {
  height: 100%;
  width: 1rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
.header_back .backBtn {
  width: 1.2rem;
  height: 1.2rem;
  position: relative;
  z-index: 2;
}
.header_back p {
  font-size: 0.4rem;
  color: #ffa4d1;
  font-weight: 700;
  text-align: center;
  white-space: pre-wrap;
  position: absolute;
  width: 100%;
  left: 0;
}
.right {
  position: absolute;
  right: 0.34rem;
}
</style>
